<template>
    <div>
        <Modal
                v-model="modal"
                title="添加/编辑报名"
                :closable="false"
                :mask-closable="false"
                width="680px">
            <Form
                    ref="formValidate"
                    :model="formItem"
                    :label-width="80">
                <FormItem label="学生" prop="studentName">
                    <Input v-model="formItem.studentName" readonly/>
                </FormItem>
                <FormItem label="年级" prop="grade">
                    <Input v-model="formItem.grade" readonly/>
                </FormItem>
                <FormItem label="科目" prop="course">
                    <Input v-model="formItem.course" readonly/>
                </FormItem>
                <FormItem label="科任老师" prop="teacher">
                    <Input v-model="formItem.teacher" readonly/>
                </FormItem>
                <FormItem label="班级类型" prop="teacher">
                    <Input v-model="formItem.feather" readonly/>
                </FormItem>
                <FormItem label="统计月份" prop="date">
                    <DatePicker type="month"
                                placeholder="选择月份"
                                style="width: 200px"
                                :value="date"
                                @on-change="handleChange"
                    >
                    </DatePicker>
                </FormItem>
                <FormItem label="总时长" prop="duration">
                    <Input v-model="duration" number placeholder="当月上课总时长"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="cancel">取消</Button>
                <Button type="primary" size="large" @click="submit('formValidate')">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>

    export default {
        name: "TeacherForm",
        data() {
            return {
                formItem: {},
                date: '',
                id: '',
                duration: ''
            }
        },
        props: ['modal', 'modify'],
        watch: {
            modify: function () {
                this.formItem = this.modify;
            },
            modal: function () {
                this.$refs['formValidate'].resetFields();
                this.date = ''
                this.id = ''
                this.duration = ''
            },
            date: function () {
                if (this.date != '')
                    this.getMonthRecord()
            }
        },
        methods: {
            //提交
            async submit(name) {
                if (this.duration == '') {
                    this.$Message.error('时长不能为空');
                } else {
                    await this.$api.monthSave({
                        id: this.id,
                        duration: this.duration,
                        recordTime: this.date
                    })
                    this.$parent.cancel();
                    this.$Message.success('保存成功');
                    this.$refs[name].resetFields();
                    this.$parent.getList();
                }
            },
            cancel() {
                this.$parent.cancel()
            },
            handleChange(date) {
                this.date = date;
            },
            async getMonthRecord() {
                let result = await this.$api.monthRecord({
                    curriculaId: this.formItem.curriculaId,
                    date: this.date
                })
                if (result == null) {
                    this.duration = ''
                } else {
                    this.id = result.id
                    this.duration = result.duration
                }
            }
        }
    }
</script>

<style scoped lang="less">
</style>
